var StarSelect = Vue.component('star-select', {
    template: `
        <div :class="[colorclass]">
			</span><i v-for="n in num" class="fa" :class="{'fa fa-star':stars>=n,'fa-star-o':stars<n}" @click="setStars(n)"></i>
		</div>
    `,
    props:{
        'colorclass':{
            type:String,
            default:'text-warning'
        },
        'value':{
            type:Number,
            default:0
        },
        'num':{
            type:Number,
            default:3
        },
        'canedit':{
            type:Boolean,
            default:true
        }
    },
    data(){
        return {
            stars:0
        }
    },
    methods:{
        setStars(n){
            if(this.canedit){
                this.stars = n;
                this.$emit('input',this.stars.toString());
            }
        }
    },
    watch:{
        value(v,ov){
            var self = this;
            this.stars = parseInt(v);
        }
    },
    mounted(){
        this.stars = parseInt(this.value);
    }
});